<template>
  <AppPage :show-footer="true">
    <div class="rel" v-if="checkIsAuth('dashboard')">
      <div class="title">持证残疾人群当月看板</div>

      <div class="flex mb-15">
        <div class="box pt-20 mr-15" style="width: 250px">
          <div class="title-2">持证残疾人群总数</div>
          <div class="flex">
            <div class="cl-primary mr-15 pt-15">
              <TheIcon icon="healthicons:people-negative" :size="30" />
            </div>

            <div class="ta-center">
              <div class="fz-30 mt-5 mb-5">
                <n-number-animation
                  show-separator
                  :to="kanban.holdCertificateNum"
                ></n-number-animation>
              </div>
              <up :value="kanban.lastMonthHoldCertificateIncrease"></up>
            </div>
          </div>
        </div>

        <div class="box pt-20 mr-15">
          <div class="flex flex-cc">
            <div class="title-2" style="width: 50px">迁入</div>
            <div class="fz-20 mt-5 mb-5" style="width: 100px">
              <n-number-animation
                show-separator
                :to="kanban.moveInNum"
              ></n-number-animation>
            </div>
            <div style="width: 120px">
              <up :value="kanban.lastMonthMoveInNumIncrease"></up>
            </div>
          </div>

          <div class="flex flex-cc">
            <div class="title-2" style="width: 50px">迁出</div>
            <div class="fz-20 mt-5 mb-5" style="width: 100px">
              <n-number-animation
                show-separator
                :to="kanban.moveOutNum"
              ></n-number-animation>
            </div>
            <div style="width: 120px">
              <up :value="kanban.lastMonthMoveOutNumIncrease"></up>
            </div>
          </div>

          <div class="flex flex-cc">
            <div class="title-2" style="width: 50px">注销</div>
            <div class="fz-20 mt-5 mb-5" style="width: 100px">
              <n-number-animation
                show-separator
                :to="kanban.logoutNum"
              ></n-number-animation>
            </div>
            <div style="width: 120px">
              <up :value="kanban.lastMonthLogoutNumIncrease"></up>
            </div>
          </div>
        </div>

        <div class="box pt-20" style="width: 300px">
          <div class="title-2">发放补贴</div>
          <div class="flex">
            <div class="cl-primary mr-15 pt-15">
              <TheIcon icon="healthicons:people-negative" :size="30" />
            </div>

            <div class="ta-center">
              <div class="fz-30 mt-5 mb-5">
                <n-number-animation
                  show-separator
                  :to="kanban.totalPeopleNum"
                ></n-number-animation>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex">
        <div class="box box--sm flex-fs-0 mr-15" style="width: 430px">
          <div class="title title--border">补贴类型领取情况</div>
          <div class="flex flex-rr fz-14 cl-basic mt-10" style="opacity: 0">
            单位：人
          </div>
          <Base-Chart style="height: 300px" :options="options1"></Base-Chart>
        </div>

        <div class="box mr-15" style="width: 430px">
          <div class="title title--border">补贴领取情况</div>
          <ul class="progress-container fz-14">
            <li class="flex flex-cc" v-for="(v, i) in options2" :key="i">
              <div class="name flex-fs-0">{{ v.name }}</div>
              <n-progress
                class="progress mr-10 ml-10"
                type="line"
                color="#1890ff"
                :percentage="v.rate"
                :show-indicator="false"
              />
              <div class="value flex-fs-0 cl-basic">{{ v.num }}</div>
            </li>
          </ul>
          <div class="flex flex-rr fz-14 cl-basic mt-10">单位：人</div>
        </div>

        <div class="box" style="width: 430px">
          <div class="title title--border">残疾情况比例</div>
          <div class="flex flex-rr fz-14 cl-basic mt-10">单位：人</div>
          <Base-Chart style="height: 300px" :options="options3"></Base-Chart>
        </div>
      </div>
    </div>

    <div class="rel pt-0" v-else>
      <div class="box pt-20">欢迎使用残联（街道）管理平台。</div>
    </div>
  </AppPage>
</template>

<script setup>
import api from './api'
import up from './components/up.vue'
import { checkIsAuth } from '@/utils'

const kanban = ref(0)
const options1 = ref({})
const options2 = ref([])
const options3 = ref({})

if (checkIsAuth('dashboard')) {
  getKanban()
  getButie(1)
  getButie(2)
  getCanji()
}

// 获取持证残疾人群当月看板
async function getKanban() {
  const { code, data } = await api.getKanban()

  if (code === 200) {
    kanban.value = data
  }
}

// 获取补贴领取情况
async function getButie(type) {
  const params = { type }

  const { code, data } = await api.getButie(params)

  if (code === 200) {
    if (type === 1) {
      const colors = [
        '#1891FF',
        '#12C3C3',
        '#FBCD14',
        '#F14864',
        '#8542E1',
        '#7DA6FF',
      ]

      options1.value = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          left: 'left',
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['65%', '50%'],
            label: {
              show: true,
              formatter(param) {
                return `${param.percent}%`
              },
            },
            data: data.map((v, i) => {
              return {
                value: v.num,
                name: v.name,
                itemStyle: {
                  color: colors[i],
                },
              }
            }),
          },
        ],
      }
    } else {
      options2.value = data
    }
  }
}

// 获取残疾情况比例
async function getCanji() {
  const params = {}

  const { code, data } = await api.getCanji(params)

  if (code === 200) {
    options3.value = {
      tooltip: {
        trigger: 'axis',
        formatter: (e) => {
          const i = e[0]
          const name = i.name
          const num = data.find((v) => v.name === name).num
          return `${name}：${num}人`
        },
      },
      grid: {
        top: 20,
        right: 0,
        bottom: 0,
        left: 0,
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: data.map((v) => v.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'bar',
          data: data.map((v) => v.num),
          label: {
            position: 'top',
            show: true,
            formatter: (e) => {
              const i = e
              const name = i.name
              const rate = data.find((v) => v.name === name).rate
              return `${rate}%`
            },
          },
          itemStyle: {
            color: '#1890FF',
            borderRadius: [100, 100, 0, 0],
          },
        },
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.rel {
  position: relative;
  padding-top: 50px;
}

.box {
  position: relative;
  padding-top: 60px;

  &--sm {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.progress-container {
  max-height: 270px;
  overflow-y: scroll;
  padding-right: 10px;

  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
  }

  li {
    height: 30px;
    font-size: 13px;

    .name {
      width: 150px;
    }

    .value {
      width: 20px;
    }
  }
}

.title-2 {
  font-size: 18px;
  color: var(--color-basic);
}
</style>
